<template>
    <div>
        <header>
            <div class="headerwrapper">
                <div class="header-left">
                    <router-link to="index.html" class="logo">
                        <img src="/static/picture/logo.png" alt="" />
                    </router-link>
                    <div class="pull-right">
                        <router-link to="#" class="menu-collapse">
                            <i class="fa fa-bars"></i>
                        </router-link>
                    </div>
                </div><!-- header-left -->

                <div class="header-right">
                    <div class="pull-right">
                        <form class="form form-search" action="search-results.html">
                            <input type="search" class="form-control" placeholder="搜索" />
                        </form>

                        <!-- 消息按钮 -->
                        <div class="btn-group btn-group-list btn-group-notification">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                              <i class="fa fa-bell-o"></i>
                              <span class="badge">5</span>
                            </button>
                            <!-- 消息列表 -->
                            <div class="dropdown-menu pull-right">
                                <router-link to="#" class="link-right"><i class="fa fa-search"></i></router-link>
                                <h5>Notification</h5>
                                <ul class="media-list dropdown-list">
                                    <li class="media">
                                        <img class="img-circle pull-left noti-thumb" src="/static/picture/user1.png" alt="">
                                        <div class="media-body">
                                          <strong>Nusja Nawancali</strong> likes router-link photo of you
                                          <small class="date"><i class="fa fa-thumbs-up"></i> 15 minutes ago</small>
                                        </div>
                                    </li>
                                    <li class="media">
                                        <img class="img-circle pull-left noti-thumb" src="/static/picture/user2.png" alt="">
                                        <div class="media-body">
                                          <strong>Weno Carasbong</strong> shared router-link photo of you in your <strong>Mobile Uploads</strong> album.
                                          <small class="date"><i class="fa fa-calendar"></i> July 04, 2014</small>
                                        </div>
                                    </li>
                                    <li class="media">
                                        <img class="img-circle pull-left noti-thumb" src="/static/picture/user3.png" alt="">
                                        <div class="media-body">
                                          <strong>Venro Leonga</strong> likes router-link photo of you
                                          <small class="date"><i class="fa fa-thumbs-up"></i> July 03, 2014</small>
                                        </div>
                                    </li>
                                    <li class="media">
                                        <img class="img-circle pull-left noti-thumb" src="/static/picture/user4.png" alt="">
                                        <div class="media-body">
                                          <strong>Nanterey Reslaba</strong> shared router-link photo of you in your <strong>Mobile Uploads</strong> album.
                                          <small class="date"><i class="fa fa-calendar"></i> July 03, 2014</small>
                                        </div>
                                    </li>
                                    <li class="media">
                                        <img class="img-circle pull-left noti-thumb" src="/static/picture/user1.png" alt="">
                                        <div class="media-body">
                                          <strong>Nusja Nawancali</strong> shared router-link photo of you in your <strong>Mobile Uploads</strong> album.
                                          <small class="date"><i class="fa fa-calendar"></i> July 02, 2014</small>
                                        </div>
                                    </li>
                                </ul>
                                <div class="dropdown-footer text-center">
                                    <router-link to="#" class="link">See All Notifications</router-link>
                                </div>
                            </div>
                            <!-- /消息列表 -->
                        </div>
                        <!-- /消息按钮 -->



                        <div class="btn-group btn-group-option">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
								<img class="img-circle avatar-img" alt="" src="/static/picture/profile.png">
								<span class="user-name">Username</span>
								<i class="fa fa-caret-down"></i>
                            </button>
                            <ul class="dropdown-menu pull-right" role="menu">
                                <li>
                                    <router-link to="/setUserinfo">
                                        <i class="glyphicon glyphicon-pencil"></i> 
                                        修改个人信息
                                    </router-link>
                                </li>
                                
                                <li>
                                    <router-link to="/logout">
                                        <i class="glyphicon glyphicon-off">
                                        </i>退出
                                    </router-link>
                                </li>
                            </ul>
                        </div><!-- btn-group -->

                    </div><!-- pull-right -->

                </div><!-- header-right -->

            </div><!-- headerwrapper -->
        </header>
    </div>
</template>

<script>
export default {
    name:'Header',
    data() {
        return {
            
        }
    },
}
</script>

<style>

</style>
